<template>
  <div class="detail">
    <img
      ref="banner"
      class="banner"
      src="../assets/detail/1.jpg"
      alt=""
      srcset=""
    />
    <div class="mains">
      <div ref="infos" class="top">
        <div class="left">
          <div class="en">{{ info.productNameEn }}</div>
          <div class="code">{{ info.productName }}</div>
        </div>
        <div class="handle">
          <ul class="ul">
            <!-- <li
              v-if="info.pdfUrl"
              v-down="{
                url: info.pdfUrl,
                type: 'PDF下载',
                name: info.productName,
              }"
            >
              <img src="../assets/detail/2.png" alt="" />
              PDF下载
            </li> -->
            <!-- 
            <li
              v-down="{
                url: info.threedUrl,
                type: '3D模型下载',
                name: info.productName,
              }"
              v-if="info.threedUrl"
            > -->

            <!-- <li class="dif" v-if="info.pdfUrl" @click="downFn(info.pdfOssId)">
             
              PDF下载
            </li>
           

            <li class="dif" @click="downFn(info.threedOssId)" v-if="info.threedUrl">
              
              3D模型下载
            </li> -->

            <li class="addcard" @click="addgwcartFn(info)">
              <img src="../assets/detail/4.png" alt="" />
              添加至购物车
            </li>
            <!-- <li @click="addgwcartFn(info)" v-if="info.isGwCart == 1">
              <img src="../assets/detail/4.png" alt="" />
              添加至清单
            </li> -->
          </ul>
        </div>
      </div>

      <div
        class="tabBox"
        ref="tab"
        :class="[serveimg ? 'fixedTab' : '']"
        :style="{ top: tops + 'px' }"
      >
        <div class="tabs"></div>
        <div class="tabBtn">
          <div :key="index" v-for="(item, index) in tabs" class="item">
            <div :class="{ active: active == index }" @click="switchTab(index)">
              {{ item }}
            </div>
          </div>
          <!-- <div class="item">产品参数</div>
          <div class="item">工作分析图</div>
          <div class="item">固件列表</div> -->
        </div>
      </div>
      <div ref="cont">
        <!-- 
        detailsUrl  详情
parameterUrl 参数
workAssayUrl 工作分析
firmwareList  这个是固件列表
-->
        <div ref="cont_1" class="sames">
          <!-- <div class="titles">中空伺服电机[产品详情]</div> -->
          <!-- <img :src="info.detailsUrl" alt="" /> -->
          <el-image
            style="width: 100%; height: auto; display: block"
            :src="info.detailsUrl"
            :preview-src-list="[info.detailsUrl]"
          >
          </el-image>
        </div>
        <div ref="cont_2" class="sames">
          <!-- <div class="titles">中空伺服电机[参数]</div> -->
          <!-- <img :src="info.parameterUrl" alt="" /> -->

          <el-image
            style="width: 100%; height: auto; display: block"
            :src="info.parameterUrl"
            :preview-src-list="[info.parameterUrl]"
          >
          </el-image>
        </div>
        <div ref="cont_3" class="sames">
          <!-- <div class="titles">中空伺服电机[工作分析图]</div> -->
          <!-- <img :src="info.workAssayUrl" alt="" /> -->

          <el-image
            style="width: 100%; height: auto; display: block"
            :src="info.workAssayUrl"
            :preview-src-list="[info.workAssayUrl]"
          >
          </el-image>
        </div>
        <div ref="cont_5" class="sames">
          <div class="titles">中空伺服电机[视频说明]</div>

          <el-carousel :autoplay="false" trigger="click" height="740px">
            <el-carousel-item v-for="item in info.videoUrlList" :key="item">
              <iframe
                :src="item"
                frameborder="0"
                width="100%"
                height="100%"
              ></iframe>
              <!-- <h3 class="small">{{ item }}</h3> -->
            </el-carousel-item>
          </el-carousel>
          <ul class="radio">
            <li :key="index" v-for="(item, index) in info.videoUrlList">
              <a :href="item" target="_blank" rel="noopener noreferrer">
                视频地址{{ index + 1 }}</a
              >
            </li>
          </ul>
        </div>
        <div ref="cont_4" class="sames">
          <!-- <li class="dif" v-if="info.pdfUrl" @click="downFn(info.pdfOssId)">
             PDF下载
           </li>
           <li class="dif" @click="downFn(info.threedOssId)" v-if="info.threedUrl">
             3D模型下载
           </li> -->

          <div class="titles">中空伺服电机[资料列表]</div>

          <ul class="ul1">
            <li>主要资料</li>
            <li>版本</li>
            <li>更新日期</li>
            <li>资料下载</li>
          </ul>
          <ul class="ul1 ul2">
            <li>PDF图纸下载</li>
            <li></li>
            <li></li>
            <!-- <li @click="downFn(info.pdfOssId)">资料下载</li> -->

            <!-- <li @click="downFn(item1.pdfOssId)">
              <img src="../assets/detail/5.png" alt="" />
              <span>下载</span>
            </li> -->

            <li>
              <!-- href="javascript:void(0);"
                  @click="downLoad(item.pdfUrl, item.productName)" -->

              <!-- <a  @click="downLoad(info.fileUrl, info.productName)" style="display: flex; align-items: center; color: #323232; text-decoration: none;">
                <img src="../assets/detail/5.png" alt="" />
              <span>下载</span>
              </a> -->

              <a
                :download="info.pdfUrl"
                target="_blank"
                :href="info.pdfUrl"
                style="
                  display: flex;
                  align-items: center;
                  color: #323232;
                  text-decoration: none;
                "
              >
                <img src="../assets/detail/5.png" alt="" />
                <span>下载</span>
              </a>
            </li>
          </ul>
          <ul class="ul1 ul2">
            <li>3D模型图纸下载</li>
            <li></li>
            <li></li>
            <!-- <li  @click="downFn(info.threedOssId)">资料下载</li> -->

            <!-- <li @click="downFn(item1.threedOssId)"> -->
            <li>
              <!-- @click="
                  downLoad(info.threedUrl, info.productName + '3D模型图纸下载')
                " -->
              <!-- :href="info.threedUrl" -->
              <a
                :href="info.threedUrl"
                style="
                  display: flex;
                  align-items: center;
                  color: #323232;
                  text-decoration: none;
                "
              >
                <img src="../assets/detail/5.png" alt="" />
                <span>下载</span>
              </a>
            </li>
          </ul>
          <ul style="margin-top: 30px" class="ul1">
            <li>辅助资料</li>
            <li>版本</li>
            <li>更新日期</li>
            <li>资料下载</li>
          </ul>
          <ul
            :key="index"
            class="ul1 ul2"
            v-for="(item1, index) in info.firmwareList"
          >
            <!-- {{ item1 }} -->
            <li>{{ index + 1 }}. {{ item1.modelType }}</li>
            <li>{{ item1.versionNo }}</li>
            <li>{{ item1.updateTime }}</li>
            <!-- {{
              item1.fileUrl
            }} -->
            <li>
              <!-- <li @click="downFn(item1.ossId)"> -->

              <!-- {{ item1 }} -->

              <a
                :href="item1.fileUrl"
                style="
                  display: flex;
                  align-items: center;
                  color: #323232;
                  text-decoration: none;
                "
              >
                <img src="../assets/detail/5.png" alt="" />
                <span>下载</span>
              </a>

              <!-- <a
                href="javascript:void(0);"
                @click="
                  downLoad(
                    item1.fileUrl,
                    '【' + item1.versionNo + '】' + item1.modelType
                  )
                "
                style="
                  display: flex;
                  align-items: center;
                  color: #323232;
                  text-decoration: none;
                "
              >
                <img src="../assets/detail/5.png" alt="" />
                <span>下载</span>
              </a> -->
            </li>
            <!-- <li
              v-down="{
                url: item1.fileUrl,
                type: '固件下载',
                name: item1.modelType + item1.versionNo,
              }"
            >
              <img src="../assets/detail/5.png" alt="" />
              <span>固件下载</span>
            </li> -->
          </ul>
        </div>
      </div>
    </div>
    <cart
      :curId="curId"
      :sendInfo="sendInfo"
      @showCartFn="showCartFn"
      v-if="showCartFlag"
    />
  </div>
</template>

<script>
import cart from "./cart";
import "../utils/vdown";
import { getproductinfo, addgwcart } from "../apis/index";
export default {
  name: "detail",
  components: { cart },
  data() {
    return {
      curId: "",
      sendInfo: {},
      showCartFlag: false,
      serveimg: false,
      tops: 0,
      tabs: ["产品详情", "产品参数", "测试数据", "视频说明", "资料下载"],
      active: 0,
      cont1: null,
      cont2: null,
      cont3: null,
      cont4: null,
      cont5: null,
      isClickTab: false,
      info: {},
    };
  },

  watch: {
    $route(to, from) {
      if (this.$route.query.id) {
        console.info("~~~~~~~~~~~~~~");
        this.getDetai();
      }
    },
  },
  mounted() {
    //绑定事件
    window.addEventListener("scroll", this.scrollToTop);

    this.cont1 = this.$refs["cont_1"];

    this.cont2 = this.$refs["cont_2"];

    this.cont3 = this.$refs["cont_3"];
    this.cont4 = this.$refs["cont_4"];
    this.cont5 = this.$refs["cont_5"];
    const tabH = this.$refs["tab"].offsetHeight;

    // 添加scroll事件监听

    this.$refs["cont"].addEventListener("scroll", () => {
      if (this.cont5.getBoundingClientRect().top <= tabH) {
        this.active = 4;
      }
      if (this.cont4.getBoundingClientRect().top <= tabH) {
        this.active = 3;
      }
      if (this.cont3.getBoundingClientRect().top <= tabH) {
        this.active = 2;

        return false;
      }

      if (this.cont2.getBoundingClientRect().top <= tabH) {
        this.active = 1;
        return false;
      }

      if (this.cont1.getBoundingClientRect().top <= tabH) {
        this.active = 0;
      }
    });
  },
  beforeDestroy() {
    //更改为其它组件的时候要解绑window的事件
    window.removeEventListener("scroll", this.scrollToTop);
  },
  computed: {},
  created() {
    this.getDetai();
  },
  methods: {
    downLoad(urls, name) {
      console.log(urls, 333333333);

      // fetch(urls)
      //   .then((res) => res.blob())
      //   .then((blob) => {
      //     const link = document.createElement("a");
      //     link.href = URL.createObjectURL(blob);
      //     // 下载文件的名称及文件类型后缀
      //     link.download = name;
      //     document.body.appendChild(link);
      //     link.click();
      //     //在资源下载完成后 清除 占用的缓存资源
      //     window.URL.revokeObjectURL(link.href);
      //     document.body.removeChild(link);
      //   });

      // 下载方法
      const x = new window.XMLHttpRequest();
      x.open("GET", urls, true);
      x.responseType = "blob";
      x.onload = () => {
        const url = window.URL.createObjectURL(x.response);
        const a = document.createElement("a");
        a.href = url;
        a.target = "_blank";
        a.download = name + urls.match(/\.([^\.]+)$/)[0];
        a.style.display = "none";
        document.body.append(a);
        a.click();
      };
      x.send();
    },
    showCartFn() {
      this.showCartFlag = false;
    },
    downFn(info) {
      console.log(info, "&&&&&&&&&&&&&");

      // this.download(info.ossId)
      this.$download.oss(info);
      // if(type==3){
      //   let fileTypes = info?.fileUrl?info?.fileUrl.split('.')?.[1]:"";
      //     this.download(`system/oss/download/${info.ossId}`,
      //     {
      // }
      // ,
      // `${name}.fileTypes`
      // )
      // }
      // this.downLoadFile(url);

      // this.download(`system/oss/download/${ossid}`, {
      // }, `${name}.xlsx`)
    },
    downLoadFile(url) {
      let fileName = url.slice(url.lastIndexOf("/") + 1); // 这里是通过从后端获取到的 url  地址中截出来原本的文件名
      fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          // 下载文件的名称及文件类型后缀
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          //在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        });
    },

    addgwcartFn(item) {
      console.log(item, 555);
      this.curId = item.id;
      this.showCartFlag = true;
      // addgwcart({
      //   productId: item.id + "",
      //   number: "1",
      //   remark: "无特殊需求",
      // })
      //   .then((res) => {
      //     if (res.data.code == 200) {
      //       this.$message({
      //         message: res.data.msg,
      //         type: "success",
      //       });
      //     }
      //     console.log(res.data.code, 88888888888);
      //   })

      //   .catch(() => {});
    },
    getDetai() {
      getproductinfo({ productId: this.$route.query.id })
        .then((res) => {
          console.log(
            JSON.stringify(res.data.data.specInfoList, null, 2),
            "~~产品详情specInfoList"
          );
          // console.log(JSON.stringify(res.data.data.specTypes,null,2), '~~产品详情specTypes');
          this.info = res.data.data;

          // sendInfo
          this.sendInfo = {
            data0: res.data.data.specInfoList,
            data1: res.data.data.specTypes,
          };
        })

        .catch(() => {});
    },
    switchTab(index) {
      // 根据当前index切换到对应的页面内容
      this.active = index;

      if (index === 0) {
        this.cont1.scrollIntoView({
          block: "start",

          behavior: "smooth",
        });
      } else if (index === 1) {
        this.cont2.scrollIntoView({
          block: "start",

          behavior: "smooth",
        });
      } else if (index === 2) {
        this.cont3.scrollIntoView({
          block: "start",

          behavior: "smooth",
        });
      } else if (index === 4) {
        this.cont4.scrollIntoView({
          block: "start",

          behavior: "smooth",
        });
      } else {
        this.cont5.scrollIntoView({
          block: "start",

          behavior: "smooth",
        });
      }
    },
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; //获取屏幕滚动距离
      console.log();

      console.log(scrollTop, this.$refs.banner.offsetHeight);
      let heights =
        // document.getElementsByClassName("headers")[0].offsetHeight +
        this.$refs.banner.offsetTop + this.$refs.infos.offsetTop;
      if (scrollTop >= heights) {
        //如果滚动大于0
        this.tops = document.getElementsByClassName("headers")[0].offsetHeight;
        //  this.$refs.head.$el.classList.add('indexFixedBox');//给节点添加吸顶样式
        this.serveimg = true;
      } else {
        //滚动小于或大于50px时，回到元素原来的位置
        //  this.$refs.head.$el.classList.remove('indexFixedBox');//移除节点的吸顶样式
        this.serveimg = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sames {
  img {
    width: 100%;
    display: block;
  }
}
.radio {
  list-style-type: none;
  a {
    padding: 8px 0;
    font-size: 16px;
    // border-bottom: 1px solid #3e4047;
    color: #323232;
    font-weight: 300;
  }
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.fixedTab {
  position: fixed;
  width: 1420px;
  // left: 0;
  // right: 0;
  z-index: 5;
}
.addcard {
  background: #323232;
  color: #fff !important;
  font-size: 18px !important;
  padding: 10px 20px;
  border-radius: 8px;
}
.detail {
  .ul1 {
    display: flex;
    color: #25a2ab;
    li {
      font-weight: 700;
      padding-bottom: 5px;
      font-size: 24px;
      list-style-type: none;
      border-bottom: 11px solid #323232;
      margin-right: 15px;
      &:last-child {
        margin-right: 0;
      }
      &:nth-child(1) {
        flex: 1;
      }
      &:nth-child(2) {
        width: 200px;
        text-align: center;
      }
      &:nth-child(3) {
        width: 225px;
        text-align: center;
      }
      &:nth-child(4) {
        width: 230px;
        text-align: center;
      }
    }
    &.ul2 {
      li {
        padding: 8px 0;
        font-size: 20px;
        border-bottom: 1px solid #3e4047;
        color: #323232;
        font-weight: 300;
        img {
          width: 26px;
          height: 26px;
          margin-right: 8px;
        }
        &:nth-child(4) {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            border-bottom: 1px solid #3e4047;
          }
        }
      }
    }
  }

  .banner {
    display: block;
    width: 100%;
    border-bottom: 1px solid #2a2c2e;
  }
  .mains {
    width: 1420px;
    margin: 0 auto;
    padding: 128px 10px 66px 37px;
    .tabs {
      width: 100%;
      height: 9px;
      background: #323232;
      // border-top: 1px solid #5b5b5b;
      // border-bottom: 1px solid #5b5b5b;
    }

    .titles {
      font-size: 40px;
      color: #323232;
      padding: 200px 30px 40px;
      font-weight: 100;
    }
    .tabBtn {
      padding: 0 57px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        cursor: pointer;
        background: #323232;
        color: #fff;
        font-size: 30px;
        width: 233px;
        height: 59px;
        margin-top: -2px;
        border-radius: 0 0 32px 32px;

        > div {
          width: 100%;
          height: 100%;
          display: flex;
          line-height: 50px;

          justify-content: center;
          border-radius: 0 0 32px 32px;
          &.active {
            // background: #25a2ab !important;
          }
        }
      }
    }
    .top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding-bottom: 15px;
    }
    .left {
      .en {
        font-size: 20px;
        color: #323232;
      }
      .code {
        color: #323232;
        font-weight: bold;
        font-size: 100px;
      }
    }
    .handle {
      margin-bottom: 30px;
      .ul {
        display: flex;
        align-items: center;
        li {
          list-style-type: none;
          display: flex;
          align-items: center;
          cursor: pointer;
          color: #33363d;
          margin-right: 20px;

          font-size: 14px;
          img {
            width: 40px;
            height: 40px;
            margin-right: 5px;
          }
          &.dif {
            color: #25a2ab;
            border-bottom: 11px solid #323232;
          }
        }
      }
    }
  }
}
</style>